<template>
  <div id="customer-detail" class="card col-12 px-0 mt-5">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb">
        <li class="breadcrumb-item ms-1">
          <router-link to="/h5/customers">客户</router-link>
        </li>
        <li class="breadcrumb-item active" aria-current="page">详情</li>
        <span class="ms-auto me-1" @click.stop="back()">返回</span>
      </ol>
    </nav>

    <template class="card" v-if="customer !== null">
      <div class="row">
        <div class="col-12">
          <ul class="nav nav-tabs nav-bordered mb-3" id="myTab" role="tablist">
            <li class="nav-item">
              <a
                class="nav-link active"
                id="detail-tab"
                data-bs-toggle="tab"
                href="#detailInfo"
                >客户详情</a
              >
            </li>
            <li class="nav-item">
              <a
                class="nav-link"
                id="mailing-tab"
                data-bs-toggle="tab"
                href="#mailingInfo"
                >邮寄地址</a
              >
            </li>
            <li class="nav-item">
              <a
                class="nav-link"
                id="login-tab"
                data-bs-toggle="tab"
                href="#loginInfo"
                >会员信息</a
              >
            </li>
            <li class="nav-item d-none">
              <a
                class="nav-link d-none"
                id="flight-discount-tab"
                data-bs-toggle="tab"
                href="#flightDiscountInfo"
                >机票优惠</a
              >
            </li>
            <li class="nav-item d-none">
              <a
                class="nav-link d-none"
                id="discount-tab"
                data-bs-toggle="tab"
                href="#discountInfo"
                >其它优惠</a
              >
            </li>
            <li class="nav-item d-none">
              <a
                class="nav-link"
                id="position-tab"
                data-bs-toggle="tab"
                href="#positionInfo"
                >雇员等级</a
              >
            </li>
            <li class="nav-item d-none">
              <a
                class="nav-link"
                id="zone-tab"
                data-bs-toggle="tab"
                href="#zoneInfo"
                >地区分类</a
              >
            </li>
            <li class="nav-item d-none">
              <a
                class="nav-link"
                id="policy-tab"
                data-bs-toggle="tab"
                href="#policyInfo"
                >差旅政策</a
              >
            </li>
          </ul>
          <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="detailInfo">
              <customer-detail-info
                :detailInfo="customer"
                :needRefresh.sync="needRefresh"
              ></customer-detail-info>
            </div>
            <div class="tab-pane fade show" id="mailingInfo">
              <customer-mailing-addresses
                :addresses="customer.addresses"
                :customerId="customer.id"
              ></customer-mailing-addresses>
            </div>
            <div class="tab-pane fade show" id="loginInfo">
              <customer-login-info
                :loginInfo="customer.loginInfo"
                :customerId="customer.id"
              ></customer-login-info>
            </div>
            <div class="tab-pane fade show" id="flightDiscountInfo">
              <customer-flight-discount
                :customerId="customer.id"
              ></customer-flight-discount>
            </div>
            <div class="tab-pane fade show" id="discountInfo">
              <customer-discount-info
                :customerId="customer.id"
              ></customer-discount-info>
            </div>
            <div class="tab-pane fade show" id="positionInfo">
              <customer-position-info
                :customerId="customer.id"
              ></customer-position-info>
            </div>
            <div class="tab-pane fade show" id="zoneInfo">
              <customer-travel-zone
                :customerId="customer.id"
              ></customer-travel-zone>
            </div>
            <div class="tab-pane fade show" id="policyInfo">
              <customer-travel-policies
                :customerId="customer.id"
              ></customer-travel-policies>
            </div>
          </div>
        </div>
      </div>
    </template>

    <my-modal-prompt ref="modalPrompt">
      <span slot="title">{{ modalTitle }}</span>
    </my-modal-prompt>
  </div>
</template>

<script>
import {
  searchCustomerDetail
} from "@/api/customer.js";
import MyModalPrompt from "@/components/modal/my-modal-prompt.vue";
import CustomerDetailInfo from "./customer-detail-info.vue";
import CustomerLoginInfo from "./customer-login-info.vue";
import CustomerDiscountInfo from "./customer-discount-info.vue";
import CustomerFlightDiscount from "./customer-flight-discount.vue";
import CustomerPositionInfo from "./customer-position-info.vue";
import CustomerTravelZone from "./customer-travel-zone.vue";
import CustomerTravelPolicies from "./customer-travel-policies.vue";
import CustomerMailingAddresses from "./customer-mailing-addresses.vue";

export default {
  components: {
    MyModalPrompt,
    CustomerDetailInfo,
    CustomerLoginInfo,
    CustomerDiscountInfo,
    CustomerFlightDiscount,
    CustomerPositionInfo,
    CustomerTravelZone,
    CustomerTravelPolicies,
    CustomerMailingAddresses,
  },
  data() {
    return {
      id: 0,
      customer: null,
      needRefresh: 0,

      modalTitle: "",
    };
  },
  computed: {
    isAdmin() {
      return this.$store.getters.isAdmin;
    },
  },
  watch: {
    needRefresh: function () {
      if (this.needRefresh == 1) {
        this.search();
      }
    },
  },
  mounted: function () {
    this.id = this.$route.params.id;
    this.search();
  },
  methods: {
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showLoading: function (msg) {
      this.$store.dispatch("showLoading", { loadingText: msg });
    },
    hideLoading: function () {
      this.$store.dispatch("hideLoading");
    },
    search: function () {
      this.needRefresh = 0;
      searchCustomerDetail(this.id, (jsonResult) => {
        this.customer = jsonResult;
      });
    },
  },
};
</script>